<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点我试试</button>
    <ul>
        <li>1</li>
        <li class="box">2</li>
        <li>3</li>
        <li>4</li>
        <li>5
            <a href="https://www.baidu.com">百度</a>

        </li>
        <li class="box">6</li>
        <li class="box">7</li>
        <li name="haha">8</li>
        <li name="haha">9</li>
        <li>10</li>

    </ul>

    <p>你是铃儿</p>
    <p>我是叮当</p>
    <p>铃儿响叮当</p>

    <input type="text">
    <input type="password">

    <script>
        // var liEles = document.getElementsByClassName('box');
        // console.log(liEles);

        // for(var i=0;i<liEles.length;i++){
        //     console.log(liEles[i]);
        // }

        // liEles.forEach(function(item){
        //     console.log(item);
        // });
        // 报错
        //HTMLCollection 的伪数组  不支持数组高级方法 
        

        // var liEles = document.getElementsByClassName('box');
        // console.log(liEles);

        // 如何使用数组高级函数  
        // 解决方案: 
        //  将伪数组变成数组即可  

        // [...liEles].forEach(function(item){
        //     console.log(item);
        // });


        // var Eles = document.getElementsByName('haha');
        // console.log(Eles);

        // for(var i=0;i<Eles.length;i++){
        //     console.log(Eles[i]);
        // }


        // Eles.forEach(function(item){
        //     console.log(item);
        // })

        //NodeList 的伪数组 支持数组高级方法 


        // var liele = document.querySelectorAll('ul > li');
        // liele.forEach(function(item){
        //     console.log(item);
        // })



        // for  和 forEach的区别

        // for 支持 下标 从 0以外的开始   
        // for 支持  步长 ++  -- +=2 


        // forEach 下标必须 从 0开始  
        //  步长不支持 -- +=2
    </script>
</body>
</html>